import React, { Component } from 'react'
import styles from "../homePage.less"
import { getNewMusicRecommend, getSearchKeyword } from "../../../api/homePage"
import classNames from 'classnames';
import { Swiper, SwiperSlide } from 'swiper/react';
import { spliceSongLit } from '../../../utils/querySearch';
import Icon from '../../../components/icon/Icon';
import { withRouter } from "react-router-dom"
import { connect } from "react-redux"
@connect(
  (state) => ({
    PayingMusic: state.PayingMusic,
    musicList: state.musicList
  }),
  dispatch => ({
    setMusic: (info) => dispatch({ type: 'platingMusic/save', payload: info })
  })
)
class NewSongRecommend extends Component {
  state = {
    songListData: null
  }
  componentDidMount() {
    this.setUiSongList()
  }
  setUiSongList = async () => {
    let width = window.innerWidth;
    let size = width > 800 ? 9 : 3;
    let res = await getNewMusicRecommend({
      limit: 45,
    })
    let arr = spliceSongLit(res.result, size)
    console.log(arr);
    this.setState({
      songListData: arr
    })
  }
  searchKey = (key, e) => {
    console.log(key);
    if(e) {
      e.stopPropagation();
    }
    this.props.history.push({ pathname: "/key_search_music_list", search: "?keyword=" + key })
  }
  playMusic = async (detail, e) => {
    if(e) {
      e.stopPropagation();;
    }
    
    let res = await getSearchKeyword({keywords: detail.id})
    let musicInfo = res.songs[0]
    this.props.setMusic(musicInfo)
  }
  render() {
    const { songListData } = this.state
    if (!songListData) {
      return <div></div>
    }
    return (
      <div className={styles.new_song_recommend}>
        <div className={styles.title}>新歌首发</div>
        <div className={styles.song_list}>
          <Swiper
            onSlideChange={() => { console.log('slide change'); this.swiper.activeIndex = 0 }}
            onSwiper={(swiper) => { this.swiper = swiper }}
          // spaceBetween={0}
          // slidesPerView={3}
          >
            {
              songListData.length > 0 ?
                songListData.map(songList => (
                  <SwiperSlide key={songList[0].id}>
                    <div className={styles.song_list_data_box}>
                      {
                        // selectId == "官方推荐"? 
                        songList.map(item => (
                          <div key={item.id} className={styles.song_list_data} >
                            <div className={styles.imgBox} onClick={(e) => this.playMusic(item, e)}>
                              <img src={item.picUrl} alt="" />
                              <div className={styles.song_list_keepOut}>
                                <div className={styles.song_list_keepOut_icon}>
                                  <Icon type="icon-bofang" />
                                </div>
                              </div>
                            </div>
                            <div className={styles.music_info} >
                              <div className={styles.music_list_name} onClick={(e) => {this.searchKey(item.name, e)}}>
                                {item.name}
                              </div>
                              <div className={styles.music_list_artists}>
                                {item.song.artists.map((artist) => (
                                  <span key={artist.id} className={styles.music_list_artists_data} onClick={(e) => {this.searchKey(artist.name, e)}} >{artist.name} </span>
                                ))}
                              </div>
                            </div>
                          </div>

                        ))
                      }
                    </div>
                  </SwiperSlide>
                ))
                : <div className={styles.emptySongList}>暂时没有此类型歌单  请改天再看</div>
            }
          </Swiper>
        </div>
      </div>
    )
  }
}

export default withRouter(NewSongRecommend)
